<template>
  <div>
    <!--        &lt;!&ndash; 添加或修改【请填写功能名称】对话框 &ndash;&gt;&ndash;&gt;-->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <div align="center">
        <el-button @click="xzfy">选择房源</el-button>
      </div>
      <el-row>
        <el-col :span="10">
          <el-form-item label="上一合同ID" prop="lastContractId">
            <el-input v-model="form.lastContractId" placeholder="请输入上一合同ID"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="小区名(楼盘)" prop="premiseName">
            <el-input v-model="form.premiseName" readonly placeholder="请输入小区名(使用楼盘名称)"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="房源ID" prop="houseId">
            <el-input v-model="form.houseId" readonly placeholder="请输入房源ID"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="房源标题" prop="houseTitle">
            <el-input v-model="form.houseTitle" readonly placeholder="请输入房源标题"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="租房类型" prop="houseLeaseType">
            <el-radio v-model="form.houseLeaseType" v-for="t in types" :key="t.id" :value="t.id" :label="t.id">
              {{ t.name }}
            </el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付类型" prop="paymentMethod">
            <el-select v-model="form.paymentMethod">
              <el-option v-for="t in payments" :key="t.id" :value="t.id" :label="t.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房产押金" prop="depositMoney">
            <el-input v-model="form.depositMoney" readonly placeholder="请输入房产押金"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="房东姓名" prop="ownerName">
            <el-input v-model="form.ownerName" placeholder="请输入房东姓名"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房东证件号码" prop="ownerIdCard">
            <el-input v-model="form.ownerIdCard" placeholder="请输入房东证件号码"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房东手机号" prop="ownerMobile">
            <el-input v-model="form.ownerMobile" placeholder="请输入房东手机号"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="租户名称" prop="signUserName">
            <el-input v-model="form.signUserName" placeholder="请输入租户名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="租户证件号" prop="signUserCard">
            <el-input v-model="form.signUserCard" placeholder="请输入租户证件号"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="租户手机号" prop="signUserMobile">
            <el-input v-model="form.signUserMobile" placeholder="请输入租户手机号"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="租户紧急联系电话" prop="signUserEmergencyPhone">
            <el-input v-model="form.signUserEmergencyPhone" placeholder="请输入租户紧急联系电话"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="租约期限开始时间" prop="leaseStartTime">
            <el-date-picker clearable
                            v-model="form.leaseStartTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择租约期限开始时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租约期限结束时间" prop="leaseEndTime">
            <el-date-picker clearable
                            v-model="form.leaseEndTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择租约期限结束时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="月租金" prop="monthRent">
            <el-input v-model="form.monthRent" readonly placeholder="月租金"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应付租金" prop="remark">
            <el-input v-model="totalRents" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="远程调用房源" :visible.sync="dialogTableVisible">
      <el-table :data="houses">
        <el-table-column property="id" label="序号" width="150"></el-table-column>
        <el-table-column property="housingId" label="楼盘id" width="150"></el-table-column>
        <el-table-column property="houseName" label="房源名称" width="200"></el-table-column>
        <el-table-column property="houseName" label="房源标题" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="xz(scope.row)" type="text" size="small">选择房源</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <pagination-->
<!--        v-show="total>0"-->
<!--        :total="total"-->
<!--        :page.sync="queryParams.pageNum"-->
<!--        :limit.sync="queryParams.pageSize"-->
<!--        :page-sizes=[3,5,10,15,20]-->
<!--        @pagination="houses"-->
<!--      />-->
    </el-dialog>
    <div slot="footer" align="center" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">重 置</el-button>
    </div>
  </div>
</template>

<script>
import { addContract, updateContract, getHouse } from '@/api/contract/contract'

export default {
  props:['id'],
  name: 'add',
  data: function() {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogTableVisible: false,
      houses: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        houseLeaseType: [
          { required: true, message: '租房类型不能为空', trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: '支付类型不能为空', trigger: 'blur' }
        ],
        signUserName: [
          { required: true, message: '租客姓名不能为空', trigger: 'blur' }
        ],
        signUserCard: [
          { required: true, message: '租客证件号不能为空', trigger: 'blur' }
        ],
        signUserMobile: [
          { required: true, message: '租客电话不能为空', trigger: 'blur' }
        ]
      },
      types: [{ id: 1, name: '合租' }, { id: 2, name: '整租' }, { id: 3, name: '公寓' }],
      payments: [{ id: 1, name: '押一付一' }, { id: 2, name: '押三付二' }, { id: 3, name: '押一付一六' }, { id: 4, name: '一年付' }]
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        contractNo: null,
        lastContractId: null,
        businessId: null,
        deptId: null,
        deptNo: null,
        premiseName: null,
        houseId: null,
        houseTitle: null,
        ownerId: null,
        ownerName: null,
        ownerIdCard: null,
        ownerMobile: null,
        signUserName: null,
        signUserCard: null,
        signUserMobile: null,
        signUserEmergencyPhone: null,
        leaseStartTime: null,
        leaseEndTime: null,
        monthRent: null,
        depositMoney: null,
        conSignTime: null,
        conInfoTime: null,
        conAudTime: null,
        operId: null,
        status: 0,
        remark: null,
        houseLeaseType: null,
        createUserid: null,
        createTime: null,
        updateUserid: null,
        updateTime: null,
        totalRent:null
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateContract(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            this.form.totalRent = this.totalRents
            addContract(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.$router.push('/contract/index')
            })
          }
        }
      })
    },
    xzfy: function() {
      this.dialogTableVisible = true
      getHouse().then(response => {
        this.houses = response.rows
      })
    },
    xz: function(data) {
      this.dialogTableVisible = false
      this.form.premiseName = data.housingId
      this.form.houseId = data.housingId
      this.form.houseTitle = data.houseName
      this.form.monthRent = data.rent
      this.form.depositMoney = data.rent
    }
  },
  computed: {
    totalRents: function() {
      if (this.form.paymentMethod === 1) {
        return this.form.monthRent * 1 + this.form.depositMoney
      }
      if (this.form.paymentMethod === 2) {
        return this.form.monthRent * 2 + this.form.depositMoney*3
      }
      if (this.form.paymentMethod === 3) {
        return this.form.monthRent * 1 + this.form.depositMoney*6
      }
      if (this.form.paymentMethod === 4) {
        return this.form.monthRent * 12 + this.form.depositMoney
      }
    }
  },
  created() {
    console.log(this.$route.query.id)
  }
}
</script>
